<template>
  <div class="container">
    <Swiper></Swiper>
      <div id="nav" class="isNav?'fixed':''" ref="m">film</div>
      <router-link to="/movieDetail/123">跳转到detail页面</router-link><br>
      <!-- 装载父路由下子路由对应的组件 -->
      <router-link to="/films/nowPlaying">正在热映</router-link>
      <router-link to="/films/comingSoon">即将上映</router-link>
      <router-view></router-view>
  </div>
</template>

<script>
import Swiper from './components/Swiper.vue'
export default {
  data() {
    return {
      isNav:false
    }
  },
  components:{
    Swiper
  },
  mounted() {
    window.addEventListener("scroll",this.handleScroll)
  },
  destroyed(){
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods: {
    handleScroll(){
      console.log(window.scrollY);
      if(window.scrollY>=400){
        this.isNav=true;
        this.$refs.m.style.opacity = 1
      }else{
        this.isNav=false;
        this.$refs.m.style.opacity = 0
      }
    }
  },
}
</script>

<style scoped>
.fixed{
  position: fixed;
  top: 0;
}
.container{
  height: 3500px;
  position: relative;
}
#nav{
  background: red;
  position: sticky;
  top: 0px;
}
.router-link-active{
  color: orangered;
}
</style>